<script name="Category" setup>
import {ref} from "vue";
import {getTreeSelect} from "@/api/product/category.js";
import {getToken} from "@/utils/auth";

// 定义分页列表数据模型
const categoryList = ref([]);
// 加载数据时显示的动效控制模型
const loading = ref(true);

/* 根据分类id查询商品分类列表 */
function getList(id) {
    loading.value = true;
    getTreeSelect(id).then((response) => {
        categoryList.value = response.data;
        loading.value = false;
    })
}

const {proxy} = getCurrentInstance();

const data = reactive({
    queryParams: {}
});
const {queryParams} = toRefs(data);

/** 导出按钮操作 */
function handleExport() {
    proxy.download('product/category/export', {
        ... queryParams.value
    }, `category_${new Date().getTime()}.xlsx`)
}

/*** 分类导入参数 */
const upload = reactive({
    // 是否显示弹出层（用户导入）
    open: false,
    // 弹出层标题（用户导入）
    title: "",
    // 是否禁用上传
    isUploading: false,
    // 是否更新已经存在的用户数据
    updateSupport: 0,
    // 设置上传的请求头部
    headers: {Authorization: "Bearer " + getToken()},
    // 上传的地址
    url: import.meta.env.VITE_APP_BASE_API + "/product/category/import"
});

/** 导入按钮操作 */
function handleImport() {
    upload.title = "用户导入";
    upload.open = true;
}

/** 下载模板操作 */
function importTemplate() {
    proxy.download("product/category/importTemplate", {}, `category_template_${new Date().getTime()}.xlsx`);
};

// 文件上传中处理
function handleFileUploadProgress(event, file, fileList) {
    upload.isUploading = true;
}

// 文件上传成功处理
const handleFileSuccess = (response, file, fileList) => {
    upload.open = false;
    upload.isUploading = false;
    proxy.$refs["uploadRef"].handleRemove(file);
    proxy.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", {dangerouslyUseHTMLString: true});
    getList(0);
};

// 提交上传文件
function submitFileForm() {
    proxy.$refs["uploadRef"].submit();
}

// 数据列表
const fetchData = async (row, treeNode, resolve) => {
    const {code, data, message} = await getTreeSelect(row.id);
    resolve(data)
}

getList(0);


/* --------------------- 静态页面测试数据 --------------------- */

// 同步加载（包含所有的数据）
const categoryList01 = ref([
    {
        "id": 1,
        "name": "数码",
        "imageUrl": "https://lilishop-oss.oss-cn-beijing.aliyuncs.com/230f48f024a343c6be9be72597c2dcd0.png",
        "orderNum": "1",
        "status": 1,
        "createTime": "2023-05-22",
        "children": [
            {"id": 3, "name": "智能设备", "orderNum": "1", "status": 1, "createTime": "2023-05-22"},
            {"id": 4, "name": "电子教育", "orderNum": "2", "status": 1, "createTime": "2023-05-22"},
        ]
    },
    {
        "id": 2,
        "name": "家用电器",
        "imageUrl": "https://lilishop-oss.oss-cn-beijing.aliyuncs.com/ada7d39419554cb1ab52b3d5aae1563a.png",
        "orderNum": "1",
        "status": 1,
        "createTime": "2023-05-22"
    },
]);

// 异步懒加载（仅包含一级数据）
const categoryList02 = ref([
    {
        "id": 1,
        "name": "数码",
        "imageUrl": "https://lilishop-oss.oss-cn-beijing.aliyuncs.com/230f48f024a343c6be9be72597c2dcd0.png",
        "orderNum": "1",
        "status": 1,
        "createTime": "2023-05-22",
        "hasChildren": true
    },
    {
        "id": 2,
        "name": "家用电器",
        "imageUrl": "https://lilishop-oss.oss-cn-beijing.aliyuncs.com/ada7d39419554cb1ab52b3d5aae1563a.png",
        "orderNum": "1",
        "status": 1,
        "createTime": "2023-05-22"
    },
]);

// 通过一级数据获取二级数据
const fetchData02 = async (row, treeNode, resolve) => {
    // 向后端发送请求获取数据
    const data = [
        {"id": 3, "name": "智能设备", "orderNum": "1", "status": 1, "createTime": "2023-05-22", "hasChildren": true},
        {"id": 4, "name": "电子教育", "orderNum": "2", "status": 1, "createTime": "2023-05-22"},
    ]
    // 返回数据
    resolve(data)
}

</script>

<template>
    <div class="app-container">

        <!-- 导入/导出按钮-->
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button icon="Download" plain type="primary" @click="handleImport">导入</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button icon="Upload" plain type="warning" @click="handleExport">导出</el-button>
            </el-col>
        </el-row>

        <el-table
            v-loading="loading"
            :data="categoryList"
            :load="fetchData"
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
            border
            lazy
            row-key="id"
        >
            <el-table-column label="分类名称" prop="name"/>
            <el-table-column #default="scope" label="图标" prop="imageUrl">
                <img :src="scope.row.imageUrl" alt="" width="50">
            </el-table-column>
            <el-table-column label="排序" prop="orderNum"/>
            <el-table-column #default="scope" label="状态" prop="status">
                {{ scope.row.status === 1 ? '正常' : '停用' }}
            </el-table-column>
            <el-table-column label="创建时间" prop="createTime"/>
        </el-table>

        <hr style="margin:100px">

        <!-- 同步加载 -->
        <el-table
            :data="categoryList01"
            border
            default-expand-all
            row-key="id"
            style="width: 100%; margin-bottom: 20px"
        >
            <el-table-column align="center" label="同步加载">
                <el-table-column label="分类名称" prop="name"/>
                <el-table-column #default="scope" label="图标" prop="imageUrl">
                    <img :src="scope.row.imageUrl" alt="" width="50">
                </el-table-column>
                <el-table-column label="排序" prop="orderNum"/>
                <el-table-column #default="scope" label="状态" prop="status">
                    {{ scope.row.status === 1 ? '正常' : '停用' }}
                </el-table-column>
                <el-table-column label="创建时间" prop="createTime"/>
            </el-table-column>
        </el-table>

        <!-- 异步懒加载 -->
        <el-table
            :data="categoryList02"
            :load="fetchData02"
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
            border
            lazy
            row-key="id"
        >
            <el-table-column align="center" label="异步懒加载">
                <el-table-column label="分类名称" prop="name"/>
                <el-table-column #default="scope" label="图标" prop="imageUrl">
                    <img :src="scope.row.imageUrl" alt="" width="50">
                </el-table-column>
                <el-table-column label="排序" prop="orderNum"/>
                <el-table-column #default="scope" label="状态" prop="status">
                    {{ scope.row.status === 1 ? '正常' : '停用' }}
                </el-table-column>
                <el-table-column label="创建时间" prop="createTime"/>
            </el-table-column>
        </el-table>

        <!-- 导入对话框 -->
        <el-dialog v-model="upload.open" :title="upload.title" append-to-body width="400px">
            <el-upload
                ref="uploadRef"
                :action="upload.url + '?updateSupport=' + upload.updateSupport"
                :auto-upload="false"
                :disabled="upload.isUploading"
                :headers="upload.headers"
                :limit="1"
                :on-progress="handleFileUploadProgress"
                :on-success="handleFileSuccess"
                accept=".xlsx, .xls"
                drag
            >
                <el-icon class="el-icon--upload">
                    <upload-filled/>
                </el-icon>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <template #tip>
                    <div class="el-upload__tip text-center">
                        <div class="el-upload__tip">
                            <el-checkbox v-model="upload.updateSupport"/>
                            是否更新已经存在的用户数据
                        </div>
                        <span>仅允许导入xls、xlsx格式文件。</span>
                        <el-link :underline="false" style="font-size:12px;vertical-align: baseline;" type="primary"
                                 @click="importTemplate">下载模板
                        </el-link>
                    </div>
                </template>
            </el-upload>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="submitFileForm">确 定</el-button>
                    <el-button @click="upload.open = false">取 消</el-button>
                </div>
            </template>
        </el-dialog>

    </div>
</template>

<style lang="scss" scoped>

</style>